<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <title></title>
    <link href="../../css/lanai-ui.css" rel="stylesheet"/>
</head>
<body>
<section class="content">
    <h3>面板风格-1</h3>
    <div class="row">
        <div class="col-sm-3">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">折叠面板（默认）</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse" type="button">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body" style="">
                    <code>.box-default</code>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
        <div class="col-sm-3">
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title">可移除面板</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="remove" type="button"><i class="fa fa-times"></i>
                        </button>
                    </div>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <code>.box-success</code>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
        <div class="col-sm-3">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <h3 class="box-title">折叠面板</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse" type="button">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body" style="display: block;">
                    <code>.box-warning</code>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
        <div class="col-sm-3">
            <div class="box box-danger">
                <div class="box-header">
                    <h3 class="box-title">加载中...</h3>
                </div>
                <div class="box-body">
                    <code>.box-danger</code>
                </div>
                <!-- /.box-body -->
                <!-- Loading (remove the following to stop the loading)-->
                <div class="overlay">
                    <i class="fa fa-refresh fa-spin"></i>
                </div>
                <!-- end loading -->
            </div>
        </div>
    </div>
    <h3>面板风格-2</h3>
    <div class="row">
        <div class="col-sm-3">
            <div class="box box-default box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">折叠面板（默认）</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse" type="button">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body" style="">
                    <code>.box-default</code>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
        <div class="col-sm-3">
            <div class="box box-success box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">可移除面板</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="remove" type="button"><i class="fa fa-times"></i>
                        </button>
                    </div>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <code>.box-success</code>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
        <div class="col-sm-3">
            <div class="box box-warning box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">折叠面板</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse" type="button">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body" style="display: block;">
                    <code>.box-warning</code>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
        <div class="col-sm-3">
            <div class="box box-danger box-solid">
                <div class="box-header">
                    <h3 class="box-title">加载中...</h3>
                </div>
                <div class="box-body">
                    <code>.box-danger</code>
                </div>
                <!-- /.box-body -->
                <!-- Loading (remove the following to stop the loading)-->
                <div class="overlay">
                    <i class="fa fa-refresh fa-spin"></i>
                </div>
                <!-- end loading -->
            </div>
        </div>
    </div>
    <h3>其他面板组件</h3>
    <div class="row">
        <div class="col-sm-4">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3>背景色可选</h3>
                    <p><code>.bg-aqua</code> <code>.bg-yellow</code> <code>.bg-green</code> <code>.bg-red</code></p>
                </div>
                <div class="icon">
                    <i class="fa fa-shopping-cart"></i>
                </div>
                <a class="small-box-footer" href="#">
                    图标可选 <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="info-box bg-green">
                <span class="info-box-icon"><i class="fa fa-money"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">收益提醒</span>
                    <span class="info-box-number">$ 41,410</span>
                    <div class="progress">
                        <div class="progress-bar" style="width: 70%"></div>
                    </div>
                    <span class="progress-description">
	                            	本月收益上升 70% 
	                        </span>
                </div>
                <!-- /.info-box-content -->
            </div>
        </div>
        <div class="col-sm-4">
            <div class="info-box">
                <span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">收益提醒</span>
                    <span class="info-box-number">$ 41,410</span>
                </div>
                <!-- /.info-box-content -->
            </div>
        </div>
    </div>
    <h3>面板嵌套</h3>
    <div class="box box-default box-solid">
        <div class="box-header">
            面板1
        </div>
        <div class="box-body">
            <div class="box box-default box-solid">
                <div class="box-header">
                    面板2
                </div>
                <div class="box-body">
                    <div class="box box-default box-solid">
                        <div class="box-header">
                            面板4
                        </div>
                        <div class="box-body">

                        </div>
                    </div>
                </div>
            </div>
            <div class="box box-default box-solid">
                <div class="box-header">
                    面板3
                </div>
                <div class="box-body">

                </div>
            </div>
        </div>
    </div>
    <h3>面板遮罩-双层面板 </h3>
    <div class="box box-default direct-chat box-solid">
        <div class="box-header with-border">
            <h3 class="box-title"><i class="fa fa-tv"></i>&nbsp;演示双面板</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-toggle="tooltip" data-widget="chat-pane-toggle" title=""
                        type="button">
                    <i class="fa fa-exchange"></i>
                </button>
            </div>
        </div>
        <div class="box-body no-padding">
            <div class="direct-chat-messages">这是第一个面板</div>
            <div class="direct-chat-contacts bg-black-gradient">
                这是第二个面板
            </div>
        </div>
    </div>
</section>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/lanai-ui.js"></script>
</body>
</html>
